<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta name="misapplication-tap-highlight" content="no"/>
    <meta name="HandheldFriendly" content="true"/>
    <meta name="MobileOptimized" content="320"/>
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" type="text/css" href="__ROOT__/XspWeb/Client/Scripts/Mui/css/mui.css?v={:SITE_VERSION}"/>
    <link rel="stylesheet" type="text/css"
          href="__ROOT__/Addons/WeVote/View/default/Public/css/page.css?v={:SITE_VERSION}"/>
    <script type="text/javascript" src="__ROOT__/XspWeb/Client/Scripts/Mui/js/mui.js?v={:SITE_VERSION}"></script>
    <script type="text/javascript" src="__ROOT__/XspWeb/Client/Scripts/MobileUI/js/mui.js?v={:SITE_VERSION}"></script>
    <script type="text/javascript" src="__ROOT__/XspWeb/Client/Scripts/Core/Common-0.2.js?v={:SITE_VERSION}"></script>
    <script type="text/javascript" src="__ROOT__/XspWeb/Client/Scripts/Core/AResult.js?v={:SITE_VERSION}"></script>
    <script type="text/javascript" src="__ROOT__/XspWeb/Client/Scripts/Core/OO-0.2.js?v={:SITE_VERSION}"></script>
    <script type="text/javascript" src="__ROOT__/XspWeb/Client/Scripts/MobileUI/js/Page.js?v={:SITE_VERSION}"></script>
    <script type="text/javascript"
            src="__ROOT__/XspWeb/Client/Scripts/MobileUI/js/InitPage.js?v={:SITE_VERSION}"></script>
    <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
    <title>详情</title>
    <style type="text/css">
        body, html {
            background-color: #ffffff;
        }

        .click-return {
            color: #0080FF;
        }

        .detail-title {
            width: 80%;
            margin: 0px auto;
            background: #dedede;
            border-radius: 3px;
            text-align: center;
            margin-top: 10px;
        }

        .wen-zi {
            width: 80%;
            height: 80px;
            margin: 0px auto;
            color: #333333;
            padding: 0px !important;
        }

        .img-detail li {
            width: 80%;
            height: auto !important;
            margin: 0px auto;
        }

        .out-title {
            color: #d82e2e;
        }

        .mui-btn-block {
            width: 65%;
            height: 40px;;
            margin: 15px auto;
            padding: 8px 0px;
            background-color: #2ac845;
            border: none;
            border-radius: 10px;;
        }

        .line:before {
            background-color: inherit;
        }

        .line:after {
            background-color: inherit;
        }
    </style>
</head>
<body>
<!-- 图册 -->
<div id="slider" class="mui-slider">
    <div class="mui-slider-group mui-slider-loop">
        <div class="mui-slider-item mui-slider-item-duplicate">
            <a href="#"><img src="__ROOT__/Public/Home/images/onethink/cloud.png"></a>
        </div>
        <div class="mui-slider-item">
            <a href="#"><img src="__ROOT__/Public/Home/images/onethink/cloud-service.png"></a>
        </div>
        <div class="mui-slider-item">
            <a href="#"><img src="__ROOT__/Public/Home/images/onethink/documentmodel.png"></a>
        </div>
        <div class="mui-slider-item">
            <a href="#"><img src="__ROOT__/Public/Home/images/onethink/modules.png"></a>
        </div>
        <div class="mui-slider-item">
            <a href="#"><img src="__ROOT__/Public/Home/images/onethink/opensource.png"></a>
        </div>
        <div class="mui-slider-item mui-slider-item-duplicate">
            <a href="#"><img src="__ROOT__/Public/Home/images/onethink/safe.png"></a>
        </div>
    </div>
    <div class="mui-slider-indicator">
        <div class="mui-indicator mui-active"></div>
        <div class="mui-indicator"></div>
        <div class="mui-indicator"></div>
        <div class="mui-indicator"></div>
    </div>
</div>
<!-- 动态数据 -->
<ul class="mui-table-view mui-grid-view mui-grid-9 white-bg">
    <li class="mui-table-view-cell mui-media mui-col-xs-4">
        <a href="#">
            <span>参与选手</span>

            <div class="mui-media-body">{$candidatesCount}</div>
        </a>
    </li>
    <li class="mui-table-view-cell mui-media mui-col-xs-4">
        <a href="#">
            <span>累计投票</span>

            <div class="mui-media-body">{$voteCount}</div>
        </a>
    </li>
    <li class="mui-table-view-cell mui-media mui-col-xs-4">
        <a href="#">
            <span>访问量</span>

            <div class="mui-media-body">{$visitCount}</div>
        </a>
    </li>

</ul>
<!-- 点击列表 -->
<ul class="mui-table-view click-list">
    <li class="mui-table-view-cell">活动介绍:{$introduce}</li>
    <li class="mui-table-view-cell">活动日期:{$datetime}</li>
    <li class="mui-table-view-cell">我的投票记录</li>
    <li class="mui-table-view-cell"><a
            href="{:addons_url('WeVote://Home/registration', array('action_id' => $action_id))}">我要报名</a></li>
    <li class="mui-table-view-cell"><a href="{$shareUrl}">关注微信号</a></li>
    <li class="mui-table-view-cell click-return"><a
            href="{:addons_url('WeVote://Home/index', array('action_id' => $action_id))}"> 返回首页</a></li>
</ul>
<div>
    <input type="hidden" name="currentActionId" value="{$action_id}" id="currentActionId">
</div>
<div class="mui-content-padded">
    <ul class="mui-table-view detail-title">
        <li class="mui-table-view-cell">
            图片选项详情
        </li>
    </ul>
</div>
<div class="mui-content-padded">
    <ul class="mui-table-view wen-zi line">
        <li class="mui-table-view-cell">
            <span class="out-title">拉票宣言：</span>{$candidate.announce}
        </li>
        <li class="mui-table-view-cell">
            <span class="out-title">自我介绍：</span>{$candidate.comment}
        </li>
    </ul>
</div>
<div class="mui-content-padded">
    <ul class="mui-table-view img-detail line">
        <li class="mui-table-view-cell">
            <img src="{$oneData.picture}" width="100%" height="100%"/>
        </li>
    </ul>
</div>
<div>
    <button class="mui-btn mui-btn-primary mui-btn-block VoteButton ">
        <input type="hidden" name="id" class="id" value="{$oneData.id}">
        <input type="hidden" name="count" class="count" value="{$oneData.count}">
        给ta投票
    </button>
    <button class="mui-btn mui-btn-primary mui-btn-block">给ta拉票</button>
</div>
<div class="distance">
</div>

<div id="mui-popover" class="mui-popover">
    <div>
        <ul class="mui-table-view mui-grid-view mui-grid-9">
            <li class="mui-table-view-cell mui-media mui-col-xs-4">
                排名

            </li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4">
                姓名
            </li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4">
                得票数
            </li>
        </ul>
    </div>
    <ul class="mui-table-view mui-grid-view mui-grid-9">
        <volist name="topData" id="vo">
            <li class="mui-table-view-cell mui-media mui-col-xs-4">
                {$vo.no}
            </li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4">
                {$vo.title}
            </li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4">
                {$vo.count}
            </li>
        </volist>
    </ul>
</div>
<nav class="mui-bar mui-bar-tab">
    <a class="mui-tab-item mui-active" href="#tabbar">
        <span class="mui-icon mui-icon-phone"></span>
        <span class="mui-tab-label">电话</span>
    </a>
    <a class="mui-tab-item" href="#tabbar-with-chat">
        <span class="mui-icon mui-icon-chat"></span>
        <span class="mui-tab-label">搜索</span>
    </a>
    <a class="mui-tab-item" href="#mui-popover">
        <span class="mui-icon mui-icon-list"></span>
        <span class="mui-tab-label">排行</span>
    </a>
    <a class="mui-tab-item" href="#tabbar-with-map">
        <span class="mui-icon mui-icon-map"></span>
        <span class="mui-tab-label">拉票</span>
    </a>
</nav>
</body>
<script type="text/javascript">
    function InitializeComponent() {
        var gallery = mui('.mui-slider');
        gallery.slider({
            interval: 2000 //自动轮播周期，若为0则不自动播放，默认为0；
        });

        // 绑定投票按钮单击击事件
        var voteButton = document.getElementsByClassName('VoteButton')[0];
        voteButton.addEventListener('tap', voteButtonHandler);
    }

    wx.config({
        debug: false,
        appId: '{$signPackage["appId"]}',
        timestamp: {$signPackage["timestamp"]},
        nonceStr: '{$signPackage["nonceStr"]}',
        signature: '{$signPackage["signature"]}',
        jsApiList: [
            'checkJsApi',
            'onMenuShareTimeline',
            'onMenuShareAppMessage'
        ]
    });

    wx.ready(function () {
        wx.checkJsApi({
            jsApiList: [
                'getNetworkType',
                'previewImage'
            ],
            success: function (res) {
            }
        });

        var shareObj = {
            title: '{$shareTitle}',
            desc: '{$shareDesc}',
            link: '{$shareUrl}',
            imgUrl: '{$shareImageUrl}',
            trigger: function (res) {
            },
            success: function (res) {
                var data = {
                    action_id: '{$action_id}'
                };

                $.getJSON('{$share_url}', data, function(result){
                    if (result.status == 0) {
                        mui.toast('分享成功');
                    }
                });
            },
            cancel: function (res) {
            },
            fail: function (res) {
            }
        };

        //分享朋友
        wx.onMenuShareAppMessage(shareObj);

        //分享朋友圈
        wx.onMenuShareTimeline(shareObj);
    });

    wx.error(function (res) {
        var str = res.errMsg;
    });

    // 投票处理函数
    function voteButtonHandler(e){
        var actionId = document.getElementById('currentActionId');

        var id = this.getElementsByClassName('id')[0];
        var count = this.getElementsByClassName('count')[0];
        var url = "{:addons_url('WeVote://Home/voteAction')}";
        var data = {
            candidate_id: id.value,
            action_id: actionId.value
        };
        var self = this;
        $.getJSON(url, data, function(result){
            if (result.status) {
                mui.toast('投票成功');
                var countSpan = self.parentNode.getElementsByClassName('countClass')[0];
                countSpan.innerHTML = ++count.value;
            } else {
                mui.toast(result.info);
            }
        });
    }
</script>
</html>